<template>
  <div class="ordernumber">
   <div class="innerbox">
      <div class="orderinfo"><span>订单信息</span></div>
    <el-row>
      <el-col :span="24" >
        <span>订单编号:</span>
        <span class="spanborder">{{ OrderData.order_id }}</span>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12" >
        <span>客户名称:</span>
        <span class="spanborder">{{ OrderData.customer_name }}</span>
      </el-col>
      <el-col :span="12" >
        <span>联系人:</span>
        <span class="spanborder">{{ OrderData.contact_name }}</span>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <span>订单总金额:</span>
        <span class="spanborder">{{ OrderData.order_amount }}</span>
      </el-col>
      <el-col :span="12">
        <span>已收款:</span>
        <span class="spanborder">{{ OrderData.order_received }}</span>
      </el-col>
    </el-row>

   <el-row>
      <el-col :span="12">
      <span>下单日期:</span>
      <span class="spanborder">{{ OrderData.order_date }}</span>
    </el-col>
    <el-col :span="12">
      <span>交单日期:</span>
      <span class="spanborder">{{ OrderData.Submit_order_date }}</span>
    </el-col>
   </el-row>


    <el-row>
      <el-col :span="12">
      <span>收货人:</span>
      <span class="spanborder">{{ OrderData.consignee }}</span>
    </el-col>
    <el-col :span="12">
      <span>收货人电话:</span>
      <span class="spanborder">{{ OrderData.consignee_phone }}</span>
    </el-col>

    </el-row>

   <el-row>
      <el-col :span="24">
      <span>收货人地址:</span>
      <span class="spanborder">{{ OrderData.consignee_address }}</span>
    </el-col>
   </el-row>

    <el-row>
      <el-col :span="24">
      <span>附件:</span>
      <span class="spanborder">{{ OrderData.order_file }}</span>
    </el-col>
    </el-row>

   <el-row>
      <el-col :span='24'>
      <span>备注:</span>
      <span class="spanborder">{{ OrderData.order_remark }}</span>
    </el-col>
   </el-row>

    <!-- 商品明细 -->
    <div class="goodsdetail">
      <span>商品明细</span>
      <Collect
        :tableData="tableData"
        :collect="collect"
        :money="money"
        class="money"
      />
      <TabList
        :tableData="tableData"
        :btnList="btnList"
        :titleList="titleList"
        :linklist="linklist"
        :isCheck="isCheck"
        @getOrderGoods="getOrderGoods"
      />
      <Page :total="totalSize" @getLimit="getLimit" @getPage="getPage" />
      <div class="btn">
        <el-button @click="Jump">关闭</el-button>
      </div>
    </div>
   </div>
  </div>
</template>

<script>
import Collect from "../../../components/collect.vue";
import TabList from "../../../components/AddOrderGoods.vue";
import { CheckOrderInfoAxios } from "../../../http/apis/orderApi";
import { timeFormat } from "../../../utils/utils";
import { mapActions } from "vuex";
import Page from "../../../components/Paging.vue";
export default {
  name: "OrderNumber",
  components: {
    Collect,
    TabList,
    Page,
  },
  data() {
    return {
      // 获取数据订单的对象
      OrderData: {},
      order_id: "",
      isCheck: false,
      currentPage: 1,
      pageSize: 3,
      totalSize: 0,
      tableData: [],
      btnList: [
        {
          id: 0,
          name: "删除",
          type: "订单新增商品",
        },
      ],
      titleList: [
        "index",
        "goods_name",
        "goods_cost",
        "goods_price",
        "order_goods_count",
        "discount",
        "order_amount",
        "goods_state",
        "order_goods_date",
      ],
      linklist: [
        {
          id: 0,
          name: "序号",
          isRouter: false,
        },
        {
          id: 1,
          name: "商品名称",
          isRouter: false,
        },
        {
          id: 2,
          name: "成本",
          isRouter: false,
        },
        {
          id: 3,
          name: "售价",
          isRouter: false,
        },
        {
          id: 4,
          name: "数量",
          isRouter: false,
        },
        {
          id: 5,
          name: "折扣",
          isRouter: false,
        },
        {
          id: 6,
          name: "总金额",
          isRouter: false,
        },
        {
          id: 7,
          name: "备注",
          isRouter: false,
        },
        {
          id: 8,
          name: "录入时间",
          isRouter: false,
        },
      ],
      // 金额
      collect: [
        // '汇总统计','总金额','已收款','欠款'
        { id: 2, name: "成本总和" },
        { id: 3, name: "售价总和" },
        { id: 4, name: "数量总和" },
        { id: 5, name: "折扣总和" },
        { id: 6, name: "最终总金额" },
      ],
      money: [],
    };
  },

  methods: {
    ...mapActions("orderStore", ["OrderGoodsInfoAction"]),

    // 分页
    getLimit(val) {
      this.pageSize = val;
      console.log(this.pageSize);
      this.getOrderGoods();
      // this.money = [];
    },
    // 分页
    getPage(val) {
      this.currentPage = val;
      this.getOrderGoods();
      // this.money = [];
    },
    // 显示金额数据
    compute() {
      this.money = [];
      var goods_cost = 0;
      var goods_price = 0;
      var order_goods_count = 0;
      var discount = 0;
      var order_amount = 0;
      console.log("tableData", this.tableData);
      for (var a = 0; a < this.tableData.length; a++) {
        goods_cost += this.tableData[a].goods_cost;
        goods_price += this.tableData[a].goods_price;
        order_goods_count += this.tableData[a].order_goods_count;
        discount += this.tableData[a].discount;
        order_amount += this.tableData[a].order_amount;
      }
      this.money.push(goods_cost);
      this.money.push(goods_price);
      this.money.push(order_goods_count);
      this.money.push(discount);
      this.money.push(order_amount);
      console.log("money", this.money);
    },
    // 查看订单信息
    CheckOrderInfo() {
      CheckOrderInfoAxios({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        order_id: this.order_id,
      })
        .then((res) => {
          console.log("查看订单信息请求成功", res.data.data);
          let arr = res.data.data;
          arr.forEach((item) => {
            let obj = {
              order_id: item.order_id,
              customer_name: item.customer_name,
              contact_name: item.contact_name,
              order_amount: item.order_amount,
              order_received: item.order_received,
              order_date: timeFormat(item.order_date),
              Submit_order_date: timeFormat(item.Submit_order_date),
              consignee: item.consignee,
              consignee_phone: item.consignee_phone,
              consignee_address: item.consignee_address,
              order_file: "1",
              order_remark: item.order_remark,
            };
            this.OrderData = obj;
          });
        })
        .catch((err) => {
          console.log("查看订单信息请求失败", err);
        });
    },

    // 获取商品详情
    getOrderGoods() {
      this.tableData = [];
      this.OrderGoodsInfoAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        orderId: this.order_id,
      })
        .then((res) => {
          console.log("获取订单商品详情数据请求成功", res.data.data);
          let arr = res.data.data[1];
          this.totalSize = res.data.data[0];
          let index = 1;
          arr.forEach((item) => {
            let obj = {
              index: index++,
              goods_name: item.goods_name,
              goods_cost: item.goods_cost,
              goods_price: item.goods_price,
              order_goods_count: item.order_goods_count,
              discount: item.discount,
              order_amount:
                item.goods_price * item.order_goods_count - item.discount,
              goods_state: item.goods_state,
              order_goods_date: timeFormat(item.order_goods_date),
              orderid: item.orderid,
              order_goods_id: item.order_goods_id,
            };
            this.tableData.push(obj);
          });
          console.log(this.tableData);
          // 计算
          this.compute();
        })
        .catch((err) => {
          console.log("获取订单商品详情数据请求成功错误", err);
        });
    },
    // 点击关闭返回到主界面
    Jump() {
      this.$router.push("/order/orderlist");
    },
  },
  created() {
    this.order_id = this.$route.query.info.order_id;
    console.log("获取页面订单id", this.order_id);
    this.CheckOrderInfo();
    this.getOrderGoods();
    this.compute();
  },
};
</script>

<style lang="scss" scoped>
.ordernumber {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background-color: #eee;
}
// 订单
.orderinfo {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.orderinfo span {
  font-size: 20px;
}
.el-col {
  margin-bottom: 20px;
}
.spanborder{
  display: inline-block;
  margin-left: 10px;
}
.innerbox{
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}


// 商品
.goodsdetail {
  width: 100%;
  position: relative;
}

.goodsdetail span {
  float: left;
  line-height: 55px;
  margin-left: 10px;
}
.money {
  width: 100%;
}
.addGoods {
  position: absolute;
  right: 10px;
  top: 5px;
}
.btn {
  width: 70px;
  margin: 80px auto;
}
</style>